<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">正在加载</div>
</body>

</html>
<script>
    /*
        基本概念
        Promise 是异步编程的一种解决方案，比传统的解决方案--回调函数和事件--更合理和更强大。它由社区最早提出和实现
        ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象
        所谓Promise,简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise
        是一个对象，从它可以获取异步操作的消息。Promise 提供统一API，各种异步操作都可以用同样的方法进行处理

        有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，此外，Promise对象提供统一的接口，
        使得控制异步操作更加容易
    */

    //基础语法
    //ES6规定，Promise对象是一个构造函数，用来生成Promise实例

    //Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署
    //Promise 实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数

    var box = document.getElementById("box");
    //创建一个Promise
    function myurl(url) {
        const myPromise = new Promise(function (resolve, reject) {
            //异步处理：模拟网络请求
            const image = new Image() // 创建一个图片对象
            image.src = url
            image.onload = function(){
                resolve(image)
            }
            image.onerror = function(){
                reject(new Error('加载图片出错' + url))
            }
        })
        return myPromise;
    }
    
    const url = myurl('https://img.youpin.mi-img.com/ferriswheel/0ab388fd_16e0_434e_a3de_b659878c9470.jpeg@base@tag=imgScale&F=webp&h=1180&q=90&w=2560');

    url
    .then(function(data){
        console.log(data)
        box.appendChild(data)
    })
    .catch(function(error){
        box.innerHTML = "获取失败"
        console.log(error)
    })
</script>